<template>
	<view>
		<template v-if="showBigImg">
			<view class="bigImg" @tap='hideBigImg()'>
				<image :src="showImg" style="height: 490rpx;width: 490rpx;" mode=""></image>
			</view>
		</template>
		<view class="jui_flex jui_bg_fff recharge_tab">
			<view class="jui_flex1 jui_text_center jui_pad_2432" v-for="(item, index) in tabList" :key="index">
				<text class="jui_fs32 jui_fc_333 recharge_tab_text jui_pad_8" :class="{'active': tabIndex == index}"
					@tap="toggle(index)">{{item.value}}</text>
			</view>
		</view>
		<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff jui_bor_rad_15">
			<view class="jui_mar_t14" style="display: flex;justify-content:space-between">
				<view>
					<!-- 提现金额 -->BLTZ数量（可用BLTZ钱包余额：{{digitalwallet || 0}}）
				</view>
				<!-- 	<view class="icon-dui" @tap='showChange()'>兑</view> -->
			</view>
			<view class="jui_flex  jui_flex_items_center " style="margin-top: 40rpx;font-size: 46rpx;">
				<!-- <text>￥</text> -->
				<input type="text" value="" style="text-align: left;" placeholder="请输入BLTZ数量" class="ipt" v-model="subInfo.money" />
			</view>
			<view style="color: #00a1ff;">
				CNY金额：{{computedCNY}}
			</view>
		</view>
		<!-- 	<view class="jui_fc_999 jui_mar_2432 jui_fs28" style="padding-left: 20rpx;">
			提现金额为{{info.task_mulriple_money || 0 }}的倍数
		</view> -->
		<!-- <view class="jui_fc_999 jui_mar_2432 jui_fs28" style="padding-left: 20rpx;">
			提现手续费{{subInfo.feemoney || 0 }}
		</view> -->
		<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff jui_bor_rad_15">
			<view class="jui_flex jui_flex_justify_between jui_flex_items_center bor" style="">
				<view class="" style="height: 64rpx; display: flex; align-items: center;">
					提现方式
				</view>
				<view class="jui_flex jui_flex_justify_between jui_flex_items_center"
					style="width: 150rpx; position: absolute; right:34rpx;">
					<xfl-select style="border: none;flex: 1;padding-right: 0" class="item-input flex-sub" :list="list"
						:clearable="false" :showItemNum="5" :isCanInput="false" :focusShowList="true"
						:placeholder="'placeholder'" :initValue="'请选择'" @change="change" :selectHideType="'hideAll'">
					</xfl-select>
				</view>
			</view>
			<!-- <template v-if="current == 0">
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							收款人姓名
						</view>
						<input type="text" value="" placeholder="请输入收款人姓名" class="ipt" v-model="subInfo.payee" />
					</view>
				</view>
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							收款账号
						</view>
						<input type="text" value="" placeholder="请输入收款账号" class="ipt" v-model="subInfo.payeecode" />
					</view>
				</view>
			</template>
			<template v-if="current == 1">
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							收款人姓名
						</view>
						<input type="text" value="" placeholder="请输入收款人姓名" class="ipt" v-model="subInfo.payee" />
					</view>
				</view>
			</template> -->
			<template v-if="current == 0">
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							收款人姓名
						</view>
						<input type="text" value="" placeholder="请输入收款人姓名" class="ipt" v-model="subInfo.payee" />
					</view>
				</view>
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							收款账号
						</view>
						<input type="text" value="" placeholder="请输入收款账号" class="ipt" v-model="subInfo.payeecode" />
					</view>
				</view>
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							开户证件
						</view>
						<input type="text" value="" placeholder="请输入收款账号绑定身份证" class="ipt" v-model="subInfo.payidcard" />
					</view>
				</view>
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							开户银行
						</view>
						<input type="text" value="" placeholder="请输入收款账号的开户行名称" class="ipt" v-model="subInfo.payeebank" />
					</view>
				</view>
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							开户行地址
						</view>
						<input type="text" value="" placeholder="请输入开户银行地址" class="ipt" v-model="subInfo.payeephone" />
					</view>
				</view>
				<view style="width:100%;height:100%;">
					<view style="padding: 30rpx 0;" v-html="txcontent"></view>
				</view>
			</template>
			<!-- <template v-if="current == 3">
				<view class="bor" style="padding: 30rpx 0;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							钱包地址
						</view>
						<input type="text" value="" placeholder="钱包地址" class="ipt" v-model="subInfo.walleturl"/>
					</view>
				</view>
			</template> -->

		</view>
		<!-- <view class="jui_mar_2432" style="" v-if="current != 2">
			<view class="jui_mar_b20">
				上传收款码
			</view>
			<view class="jui_bg_fff jui_flex jui_flex_items_center jui_flex_justify_center jui_bor_rad_10"
				style="height: 180rpx;width: 180rpx;" @tap="upload()">
				<image src="/static/imgs/user/xiaojia.png" mode="" style="height: 42rpx;width: 42rpx;" v-if="!img">
				</image>
				<image :src="img" mode="" style="height: 100%;width: 100%;" v-else></image>
			</view>
		</view> -->
		<popup-layer ref="popupRef" :direction="'top'">
			<view class="jui_bg_fff jui_pad_2432 " style="border-radius: 29upx 29upx 0 0; margin: 48rpx 40rpx 24rpx;">
				<view class="bor" style="padding: 30rpx 0 50rpx;">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
						<view class="">
							兑现金额
						</view>
						<input type="text" value="" placeholder="请输入兑现金额" class="ipt" v-model="subInfo.exchnumber" />
					</view>
				</view>
				<view style="display: flex; align-items: center; justify-content: center; width:100%; ">
					<view class="change  jui_bor_rad_40  jui_fs28 jui_fc_fff" @tap="exchange()">立即兑现</view>
				</view>
			</view>
		</popup-layer>
		<view class="jui_h100"></view>
		<view class="jui_public_btn jui_bg_fff jui_public_btn_radius"
			style="width:100%;position: fixed;bottom: 0;left: 0;">
			<button @tap="submit()">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						value: '线下提现',
						type: 0
					},
					{
						value: '提现记录',
						type: 1
					},
				],
				tabIndex: 0,
				list: [
					// {
					// 	value: '支付宝',
					// 	type: 'zfb'
					// },
					// {
					// 	value: '微信',
					// 	type: 'wx'
					// },
					{
						value: '银行卡',
						type: 'bank'
					},
					// {
					// 	value: 'BLTZ',
					// 	type:'wallet'
					// },
				],
				current: 0,
				txcontent:'',
				img: '',
				showBigImg: false,
				info: {
					task_mulriple_money: uni.getStorageSync('fee')
				},
				digitalMoney: '',
				subInfo: {},
				digitalwallet: uni.getStorageSync('digitalwallet') //数字货币
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: 'withdrawalLog'
			})
		},
		onLoad() {
			//默认进入不加载提现方式
		},
		computed: {
			computedCNY() {
				let price = this.subInfo.money ? (this.subInfo.money * this.digitalMoney).toFixed(2) : 0
				return price
			}
		},
		methods: {
			showChange() {
				this.$refs.popupRef.show();
			},
			showBig() {
				this.showBigImg = true
			},
			hideBigImg() {
				this.showBigImg = false
			},
			toggle(index) {
				this.tabIndex = index;
				if(this.tabIndex==1){
					uni.navigateTo({
						url: 'withdrawalLog'
					});
				}
			},
			change(e) {
				this.current = e.index;
				this.subInfo.type = e.orignItem.type;
				this.init(e.orignItem.type);
			},
			exchange() {
				if (!this.subInfo.exchnumber) {
					return this.$msg("请输入兑现金额")
				}
				const _token = uni.getStorageSync('token');
				let params = {
					_token: _token,
					exchnumber: this.subInfo.exchnumber
				}
				this.$api.exchange(params).then(res => {
					if (res.ok) {
						this.$msg(res.msg);
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/user/wallet/wallet`
							});
						})
					} else {
						this.$msg(res.msg);
					}
				});
			},
			init(type) {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				let params = {
					_token: _token
				}
				this.$api.config(params).then(res => {
					if (res.ok&&res.data) {
						this.digitalMoney = res.data.digitalMoney
					}
				});
				let params01 = {
					type:type,
					_token: _token
				}
				this.$api.paymoney(params01).then(res=>{
					if(res.ok&&res.data&&res.data.txcontent){
						this.txcontent = res.data.txcontent
					}
				})
				let params02 = {
					paytype: type,
					userId: userId,
					_token: _token
				}
				this.$api.addUwithdraw(params02).then(res=>{
					if(res.ok&&res.data){
						res.data.type = this.subInfo.type;
						res.data.money = this.subInfo.money;
						this.subInfo = res.data;
					}
				})
			},
			upload() {
				this.$tool.upload('single', 3, '/rest/busi/api/upload').then(res => {
					this.img = res.showImg;
					this.subInfo.image = res.data;
				})
			},
			submit() {
				let _token = uni.getStorageSync('token');
				let userId = uni.getStorageSync('uid');
				var pattern = /^0\.\d{2}$/;
				if (!this.subInfo.money) {
					return this.$msg("请输入提现金额")
				}
				if (!(/(^[0-9]*[1-9][0-9]*$)/.test(this.subInfo.money))) {
					return this.$msg("请输入非小数的数字")
				}
				if (this.subInfo.type == "" || this.subInfo.type == null || this.subInfo.type == undefined) {
					return this.$msg("请选择提现方式")
				}
				// if (!this.subInfo.image) {
				// 	return this.$msg("请上传收款码")
				// }
				let params = {
					_token: _token,
					userId: userId,
					paymoney: this.subInfo.money,
					paytype: this.subInfo.type,
					payee: this.subInfo.payee,
					payeecode: this.subInfo.payeecode,
					payeebank: this.subInfo.payeebank,
					payidcard: this.subInfo.payidcard,
					payeephone: this.subInfo.payeephone,
					// walleturl:this.subInfo.walleturl,
					path: this.subInfo.image,
					type: '3',
					remark: '移动端提现'
				}
				this.$api.addWithdraw(params).then(res => {
					if (res.ok) {
						this.$msg(res.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/user/wallet/withdrawalLog`
							})
						})
					}else{
						this.$msg(res.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.ipt {
		width: 60%;
		text-align: right;
		font-size: 30rpx;
	}

	.bor {
		border-bottom: 1px solid #f5f5f5;
	}

	.change {
		width: 310rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f75656;
		box-shadow: 0px 0px 20px 0px rgba(247, 86, 86, 0.6);
		border-radius: 40rpx;
		text-align: center;
	}

	.icon-dui {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50rpx;
		height: 50rpx;
		border: 1px solid;
		border-radius: 100%;
		font-size: 24rpx;
		background-color: #2db7f5;
		color: #fff;
	}

	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		justify-content: center;
		align-items: center;

		.btn {
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
			width: 90%;
			margin: 0 auto;
			line-height: 80rpx;
			text-align: center;
			height: 80upx;
			border-radius: 80upx;
			background-color: $zhuse;
			color: #fff;


			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}
	
	.recharge_tab {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
		.recharge_tab_text {
			position: relative;
		}
		.recharge_tab_text::after {
			content: '';
			width: 40%;
			height: 3px;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 30%;
			z-index: 1;
		}
		.recharge_tab_text.active::after {
			content: '';
			width: 40%;
			height: 3px;
			background-color: $zhuse;
			border-radius: 2px;
			position: absolute;
			bottom: 0;
			left: 30%;
			z-index: 1;
		}
	}
</style>
